<docs>
  ## 个人就业登记
</docs>
<template>
  <div class="wrap con-layout">
    <my-bread title="个人信息变更" :goback="true"></my-bread>
    <co-form :model="data" :rules="rules" ref="form">
      <co-input prop="xm" label="姓名" v-model="data.xm" :disabled="true"></co-input>
      <co-input prop="sjhm" label="手机号码" v-model="data.sjhm" :disabled="true"></co-input>
      <co-select prop="hjxz" label="户口性质" v-model="data.hjxz" :list="codeTable.syry_d_hjxz"></co-select>
      <select-json
        ref="hjd"
        label="户籍地"
        prop="hjxzqh"
        :placeName.sync="data.hjxzqhZH"
        :disabled="hjdisabled"
        v-model="data.hjxzqh"
      ></select-json>
      <co-input label="户籍详细地址" prop="hjxxdz" v-model="data.hjxxdz"></co-input>
      <select-json
        ref="czd"
        label="常住地"
        prop="czdxzqh"
        :placeName.sync="data.czdxzqhZH"
        v-model="data.czdxzqh"
      ></select-json>
      <co-input label="常住地详细地址" prop="czdxxdz" v-model="data.czdxxdz"></co-input>
      <co-select
        prop="whcd"
        label="文化程度"
        v-model="data.whcd"
        :list="codeTable.cdg_educationallevel"
      ></co-select>
      <data-picker prop="bysj" label="毕业时间" v-show="whcdShow" v-model="data.bysj"></data-picker>
      <tree-select
        prop="fwjg"
        label="服务机构"
        :place="fwjgTxt"
        :items="fwjgList"
        v-show="fwjgshow"
        v-model="data.fwjg"
        ref="fwjg"
        :odd="true"
      ></tree-select>
      <select-json
        label="失业前在京参保地"
        prop="cbdxzqh"
        v-show="cbdShow"
        ref="cbd"
        :checkSelect="checkSelectShow"
        :placeName.sync="data.cbdxzqhZH"
        :url="jsonUrl"
        v-model="data.cbdxzqh"
      ></select-json>
      <select-json
        label="失业前在京就业地"
        prop="jydxzqh"
        v-show="jydShow"
        ref="jyd"
        :checkSelect="checkSelectShow"
        :placeName.sync="data.jydxzqhZH"
        :url="jsonUrl"
        v-model="data.jydxzqh"
      ></select-json>
    </co-form>
    <div class="next-step">
      <span class="btn btn-light" @click="PrevStep">返回</span>
      <span class="btn btn-primary" @click="save">保存</span>
    </div>
  </div>
</template>
<script>
import coForm from "base/form/form";
import coInput from "base/form/input";
import coSelect from "base/form/select";
import treeSelect from "base/form/treeSelect";
import treeOdd from "base/form/treeOdd";
import { validator } from "common/js/valid";
import dataPicker from "base/form/dataPicker3";
import selectJson from "base/form/selectJson";
import coUpload from "base/form/upload/upload";

export default {
  name: "xxbgData",
  components: {
    coForm,
    coInput,
    coSelect,
    treeSelect,
    dataPicker,
    selectJson,
    coUpload,
    treeOdd
  },
  data() {
    return {
      checkSelectShow: true, //显示选择某级级联
      hjdisabled: false, //户籍性质是否可点
      whcdShow: false, //文化程度显隐
      cbdShow: false, //参保地显隐
      jydShow: false, //就业地显隐
      fwjgshow: false, //服务机构显隐
      jsonUrl: "", //获取json不同地址
      fwjgTxt: "请选择服务机构",
      fwjgList: [], //服务机构
      data: {
        xm: "", //姓名
        sjhm: "", //手机号码
        hjxz: "", //户籍性质
        hjxzqh: "", //户籍地
        hjxzqhZH: "", //户籍地中文
        hjxxdz: "", //户籍详细地址
        czdxzqh: "", //常住地
        czdxzqhZH: "", //常住地中文
        czdxxdz: "", //常住地详细地址
        whcd: "", //文化程度
        bysj: "", //毕业时间
        fwjg: "", // 服务机构
        cbdxzqh: "", //本次失业前在京参保地  行政区划
        cbdxzqhZH: "", //本次失业前在京参保地 名称
        jydxzqh: "", //本次失业前在京就业地  行政区划
        jydxzqhZH: "", //本次失业前在京就业地 名称
        zjlx: "", //证件类型
        jsyzt: "", //就失业状态
        djdlb: ""
      },
      rules: {
        xm: validator("10,normal,姓名,false"), // 姓名
        sjhm: validator("11,normal,手机号,false"), // 手机号
        hjxz: validator("2,least,户口性质,false"), // 户口性质
        hjxzqh: validator("128,less,户籍地,false"), // 户籍地址
        hjxxdz: validator('128,less,"户籍地详细地址",false'), // 户籍地详细地址
        czdxzqh: validator("128,less,居住地址,false"), // 常住地
        czdxxdz: validator("128,less,居住地详细地址,false"), // 常住地详细地址
        whcd: validator("2,full,文化程度,false"), // 文化程度
        bysj: validator("10,full,毕业时间,true"), // 毕业时间
        fwjg: validator("1,less,服务机构,false"), // 服务机构
        cbdxzqh: validator("128,less,本次失业前在京参保地,true"), // 本次失业前在京参保地
        jydxzqh: validator("128,less,本次失业前在京就业地,true") // 本次失业前在京就业地
      },
      codeTable: {
        syry_d_hjxz: [], //户籍性质
        cdg_educationallevel: [] //文化程度
      }
    };
  },
  watch: {
    "data.zjlx": function(val) {
      //不同证件类型控制查询不同json文件
      this.jsonUrl = val == "01" ? "2" : "3";
    },
    //户籍地，居住地判断 服务机构显隐
    "data.hjxzqh": function(val) {
      const hjddz = val.substring(0, 2); //户籍地
      const czddz = this.data.czdxzqh.substring(0, 2); //常住地
      this.fwjfSwitch(hjddz, czddz);
    },
    //户籍地，居住地判断 服务机构显隐
    "data.czdxzqh": function(val) {
      const czddz = val.substring(0, 2); //常住地
      const hjddz = this.data.hjxzqh.substring(0, 2); //户籍地
      this.fwjfSwitch(hjddz, czddz);
    },
    // 在京参保地
    "data.cbdxzqh": function(val) {
      if (this.data.zjlx == "02") {
        if (val.substring(6, 9) == "000") {
          this.data.cbdxzqh = this.data.cbdxzqhmc = "";
          this.$refs.cbd.$el.childNodes[2].childNodes[0].innerText = "";
          this.$alert("请将本次失业前在京参保地请选择到街道!");
        }
      } else if (this.data.zjlx == "01") {
        if (val.substring(3, 6) == "000") {
          this.data.cbdxzqh = this.data.cbdxzqhmc = "";
          this.$refs.cbd.$el.childNodes[2].childNodes[0].innerText = "";
          this.$alert("请将本次失业前在京参保地请选择到区!");
        }
      }
    },
    // 在京就业地
    "data.jydxzqh": function(val) {
      if (this.data.zjlx == "02") {
        if (val.substring(3, 6) == "000") {
          this.data.jydxzqh = this.data.jydxzqhmc = "";
          this.$refs.jyd.$el.childNodes[2].childNodes[0].innerText = "";
          this.$alert("请将本次失业前在京就业地请选择到街道!");
        }
      } else if (this.data.zjlx == "01") {
        if (val.substring(3, 6) == "000") {
          this.data.jydxzqh = this.data.jydxzqhmc = "";
          this.$refs.jyd.$el.childNodes[2].childNodes[0].innerText = "";
          this.$alert("请将本次失业前在京就业地请选择到区!");
        }
      }
    },
    "data.fwjg": {
      handler: function(val) {
        if (val == "3") {
          this.cbdShow = true; //参保地
          this.fwjgTxt = "参保地";
        } else {
          this.cbdShow = false; //
          this.data.cbdxzqh = this.data.cbdxzqhZH = "";
        }
        if (val == "4") {
          this.jydShow = true; //jydShow
          this.fwjgTxt = "就业地";
        } else {
          this.jydShow = false;
          this.data.jydxzqh = this.data.jydxzqhZH = "";
        }
        if (val == "1") {
          this.fwjgTxt = "户籍地";
        } else if (val == "2") {
          this.fwjgTxt = "常住地";
        }
      },
      deep: true,
      immediate: true
    },

    //文化程度
    "data.whcd": function(val) {
      if (val <= 30) {
        this.whcdShow = true;
      } else {
        this.whcdShow = false;
        this.data.xdxlzsrq = "";
      }
    }
  },
  methods: {
    //服务机构切换显示
    fwjfSwitch(hjddz, czddz) {
      if (hjddz != "11" && czddz != "11") {
        //非北京
        this.fwjgList = [
          { text: "参保地", id: "3" },
          { text: "就业地", id: "4" }
        ];
      } else if (hjddz == "11" && czddz != "11") {
        this.fwjgList = [{ text: "户籍地", id: "1" }];
      } else if (hjddz != "11" && czddz == "11") {
        //常住显示
        this.fwjgList = [{ text: "常住地", id: "2" }];
        this.cbdShow = this.jydShow = false;
      } else {
        //都是北京
        this.fwjgList = [
          { text: "户籍地", id: "1" },
          { text: "常住地", id: "2" }
        ];
      }
      if (!this.fwjgList.some(item => item.id == this.data.fwjg)) {
        this.data.fwjg = "";
        this.$refs.fwjg.activeName = "请选择服务机构";
      }
    },
    /* 获取代码表 */
    GET_codeTable() {
      const arrTableName = Object.keys(this.codeTable);
      this.$http
        .get("/jysydj/CodeOperation/getCodeData", {
          params: {
            dmbm: arrTableName.join()
          }
        })
        .then(res => {
          const data = res.returnData;
          arrTableName.forEach(item => {
            this.codeTable[item] = data[item];
          });
        });
    },
    getJyxxCx() {
      // this.$loading = true;
      // this.$http
      //   .get("/jysydj/xxbg/getJbxx")
      //   .then(res => {
      //     const _res = res.returnData;
      //     if (_res.executeResult == 1) {
      //       // this.data = _res.jbxx; //数据回显
      //       this.$nextTick(() => {
      //         Object.keys(this.data).forEach(item => {
      //           this.data[item] = _res.jbxx[item];
      //         });

      // 赋值
      const { data } = this.$route.query;
      if (!this.$route.query) return;
      Object.keys(this.data).forEach(item => {
        this.data[item] = this.$route.query[item];
      });
      this.data.fwjg = this.$route.query.djdlb; //服务机构等级列表

      //以下条件 户籍性质 不可修改
      if (
        this.data.hjxzqh.substring(0, 2) == "11" &&
        this.data.hjxz != "50" &&
        this.data.jsyzt == "1"
      ) {
        this.hjdisabled = true;
      } else {
        this.hjdisabled = false;
      }
      //服务机构显隐
      if (this.data.jsyzt == 1) {
        this.fwjgshow = true;
      }
      //     });
      //   }
      // })
      // .finally(() => {
      //   this.$loading = false;
      // });
    },
    save() {
      this.$refs.form.validate(() => {
        {
          if (!this.data.hjxzqh) {
            this.$refs.form.errorMsg = "户籍地不能为空!";
            return;
          }
          if (!this.data.czdxzqh) {
            this.$refs.form.errorMsg = "常住地不能为空!";
            return;
          }
          if (!this.data.hjxz) {
            this.$refs.form.errorMsg = "户籍性质不能为空!";
            return;
          }
          if (this.whcdShow && !this.data.hjxz) {
            this.$refs.form.errorMsg = "毕业时间不能为空!";
            return;
          }
          if (this.data.jsyzt == 1) {
            if (!this.data.fwjg) {
              this.$refs.form.errorMsg = "服务机构不能为空!";
              return;
            }
          }
          if (this.cbdShow && !this.data.cbdxzqh) {
            this.$refs.form.errorMsg = "失业前在京参保地不能为空!";
            return;
          }
          if (this.jydShow && !this.data.jydxzqh) {
            this.$refs.form.errorMsg = "失业前在京就业地不能为空!";
            return;
          }
          if (this.data.whcd <= 30 && this.whcdShow && !this.data.bysj) {
            this.$refs.form.errorMsg = "毕业时间不能为空!";
            return;
          }

          if (this.data.hjxzqh.substring(0, 2) == "11") {
            if (this.data.hjxz == "50") {
              this.$refs.form.errorMsg = "户口性质不能选择居民户!";
              return false;
            }
          }
          const hjd2 = this.data.hjxzqh.substring(0, 2);
          const czd2 = this.data.czdxzqh.substring(0, 2);
          const hjd = this.data.hjxzqh.substring(6, 12);
          const czd = this.data.czdxzqh.substring(6, 12);
          if (hjd2 == "11" && hjd == "000000") {
            this.$refs.form.errorMsg = "请选择户籍地所在居委会（村）!";
            return false;
          }
          if (czd2 == "11" && czd == "000000") {
            this.$refs.form.errorMsg = "请选择常住地所在居委会（村）!";
            return false;
          }
          this.data.sjly = "3";
          this.$confirm("确定要变更信息吗？", "提示").then(() => {
            this.$loading = true;
            this.$http
              .post("/jysydj/xxbg/xxbgbc", this.data)
              .finally(() => {
                this.$loading = false;
              })
              .then(res => {
                if (+res.returnData.executeResult == 1) {
                  this.$alert({
                    message: res.returnMsg,
                    cb: () => {
                      this.$router.push({ path: "/index" });
                    }
                  });
                } else {
                  this.$alert({
                    message: res.returnData.message
                  });
                  return false;
                }
              });
          });
        }
      });
    },
    PrevStep() {
      this.$router.goBack();
    }
  },
  created() {
    // 获取代码表
    this.GET_codeTable();
    //信息查询
    this.getJyxxCx();
  }
};
</script>
<style scoped lang="scss">
@import "~common/scss/var.scss";
.wrap {
  background: $color-bg;
  overflow: auto;
  .tape {
    margin-top: 20px;
  }
  .weui-cell {
    background-color: #fff;
  }

  .next-step {
    margin: 42px 0 20px 0;
    padding: 0 34px;
    .btn {
      width: 330px;
    }
    .btn-primary {
      margin-left: 10px;
    }
  }
}
.switch {
  font-size: 26px;
}
.tip {
  padding: 10px 30px;
  color: #ff9933;
  font-size: 26px;
}
</style>
